<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸属性</title>
		<style>
			span{
				font-size: 5em;
				color: rgb(26, 150, 100);
				background-color: rgba(86,135,72,.1);
			}
			/* ------------最大最小宽度问题-------------------------- */
			div#container{/* 权值：101 */
			    background-color: #eedfdb;
			}
			div.box{
				background-color: #ff0e42;
				color: #fff;
				width: 80%;
				/* 最大宽度与普通宽度同时出现，以最大宽度为准 */
				max-width: 550px;
				/* 最小宽度，页面承受最小宽度，小于尺寸，字体或者图片位置不变
				 同时出现 min-width和max-width,最小值大于最大值，以最小值优先
				 */
				min-width: 500px;
			}
		</style>
	</head>
	<body>
		<!-- 所有属性值的单位
		     常用尺寸单位：%、px 像素 绝对值、em 移动端 字体倍数
			 常用颜色单位：网页三原色：红、绿、蓝，组成页面上的所有颜色
			              rgb(0~255,0~255,0~255) 
						  rgba(0~255,0~255,0~255,0~1) 遮罩层
						  #rrggbb 十六进制        组成：0~9  a~z  A~Z
						  常用十六进制：#000000 黑色  #ffffff 白色
						  简写十六进制：#ffff00 简写 #ff0 #000 #fff
		 -->
		 <span>lorem</span>
		 <!-- 自适应：最大、小宽高   最小和最大宽度-->
		 <div id="container">
		 	<div class="box">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis perferendis vitae, error, reprehenderit veritatis omnis aliquam officia, animi voluptatem modi nesciunt qui rem iusto esse tenetur? Mollitia accusantium excepturi exercitationem!</div>
		 </div>
	</body>
</html>